<!-- 订单详情 -->
<template>
	<s-layout title="意见反馈">

		<view class="content">
			<uni-forms ref="form" label-position="top">
				<!--留言 -->
				<view class="refund-item">
					<view class="item-title ss-m-b-20">反馈内容</view>
					<view class="describe-box">
						<uni-easyinput
								v-model="state.model.content"
								:inputBorder="false"
								autoHeight
								class="describe-content"
								maxlength="120"
								placeholder="宝子~ 请描述您的使用反馈, IM会及时进行跟进处理哦~（支持上传图片~）"
								type="textarea"
						></uni-easyinput>
						<view class="upload-img">
							<uni-file-picker
									@delete="e => onDelete(e)"
									ref="uploadStorage"
									v-model="state.model.imgs"
									fileMediatype="image"
									limit="5"
									:auto-upload="false"
									@select="e => onSelect(e)"
							>
							</uni-file-picker>
						</view>
					</view>
				</view>
			</uni-forms>
			<!-- 底部按钮 -->
			<su-fixed bottom placeholder>
				<button class="generic-btn" style="width: 70% !important;" @tap="onSave">
					<text class="btn-text">提交</text>
				</button>
			</su-fixed>
		</view>
	</s-layout>
</template>

<script setup>
import sheep from '@/sheep';
import {onLoad} from '@dcloudio/uni-app';
import {reactive, ref} from 'vue';
import {baseUrl} from "@/sheep/config";
import {isEmpty} from "lodash";

const state = reactive({
	model: {
		content: '',
		storageImgUrl: '',
		storageImgUrlList: []
	}
});

async function uploadFiles(urls) {
	if (urls.length === 0) {
		return; // 所有文件上传完成，结束递归
	}

	const filePath = urls[0];

	try {
		const res = await uni.uploadFile({
			url: baseUrl + '/no-auth/oss/upload',
			filePath: filePath,
			name: 'file'
		});

		if (res.statusCode === 200) {
			let data = JSON.parse(res.data);
			if (!sheep.$helper.isRealEmpty(data.url)) {
				state.model.storageImgUrl += data.url + ',';
			} else {
				sheep.$helper.toast(`图片${i + 1}上传失败，请稍后重新拍摄`);
			}
		}

	} catch (error) {
		sheep.$helper.toast(`图片${i + 1}上传失败，请稍后重新拍摄`);
	}

	// 继续上传下一个文件
	await uploadFiles(urls.slice(1));
}

async function onSave() {
	uni.showLoading({
		title: '上传中...',
		mask: true
	});

	try {

		if (sheep.$helper.isRealEmpty(state.model.content)) {
			sheep.$helper.toast('请填写反馈内容');
			return;
		}

		await uploadFiles(state.model.storageImgUrlList);

		uni.hideLoading();

		if (sheep.$helper.isRealEmpty(state.model.storageImgUrl)) {
			sheep.$helper.toast('请上传图片');
			return;
		}

		state.model.storageImgUrl = state.model.storageImgUrl.substring(0, state.model.storageImgUrl.length - 1);

		await sheep.$api.app.addFeedback({
			content: state.model.content,
			imgs: state.model.storageImgUrl
		}).then(res => {
			// 确认框
			uni.showModal({
				title: '感谢宝子反馈~',
				content: 'IM会及时进行跟进处理哦~',
				showCancel: false,
				confirmText: '确认',
				success: function (res) {
					console.log(res, 'res')
					sheep.$router.back();
				}
			});
		})
	} catch (error) {
		uni.hideLoading();
		console.error(error);
	}
}


function onSelect(e) {
	console.log(e, 'select')
	console.log(state.model.storageImgUrlList, 'storageImgUrlList')
	const tempFilePaths = e.tempFilePaths
	state.model.storageImgUrlList.push(tempFilePaths[0])
}

function onDelete(e) {
	console.log(e, 'delete')
	console.log(state.model.storageImgUrlList, 'storageImgUrlList-delete-before')
	state.model.storageImgUrlList.splice(e.tempFilePath, 1)
	console.log(state.model.storageImgUrlList, 'storageImgUrlList-delete-after')
}
</script>

<style lang="scss" scoped>


.content {
	padding: 7%;
}

.generic-btn {
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 24rpx;
	padding: 5rpx;
	background: linear-gradient(to right, #3E3A39, #3E3A39, #3E3A39);
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
	animation: fadeInUp 0.5s ease-out both;
	color: #ffffff;
	font-weight: bold;
	font-size: 30rpx;
}

.item-title {
	font-size: 30rpx;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
}
</style>
